<template>
    <!-- 首页分类列表 start -->
    <!-- <div class="films-box" ref="scroll"> -->
    <ViewScroll class="films-box">
        <div>
            <div class="list-name">
                <span>{{ $route.query.typeName || '全网查询' }}</span>
            </div>
            <FilmList class="content-list" :list="films"></FilmList>
        </div>
    </ViewScroll>
    <!-- </div> -->
    <!-- 首页分类列表 end -->
</template>

<script>
import FilmList from "../components/FilmList";
// import BScroll from 'better-scroll'
export default {
    components: {
        FilmList
    },
    data(){
        return {
            films:[]
        }
    },
    watch:{
        // $route:function(){
        //     console.log("111");
        //     this.loadFilmsData();
        // }
        "$route.query.search":function(){
            this.loadFilmsData();
        }
    },
    methods:{
        loadFilmsData(){
            let params = {
                size:12
            }
            if(this.$route.query.typeId){
                params.typeId = this.$route.query.typeId;
            }else{
                params.seach = this.$route.query.search;
            }

            this.$api.loadFilmsByParams(params)
            .then(( { resultState,result } )=>{
                if (!resultState) {
                    return Promise.reject({
                        message: "网络延迟，稍后重试!"
                    });
                }
                this.films = result;
            })
            .catch(this.$error);
        },
        // initBS(){
        //     this.$nextTick(()=>{
        //         new BScroll(this.$refs.scroll,{})
        //     })
        // }
    },
    mounted(){
        console.log("filmsPage-mounted");
        // this.initBS();
        this.loadFilmsData();
        // this.loadFilmsData(this.$route.query.typeId);
        // console.log(this.$route.query.typeId)
        // console.log(this.$route.query.typeName)

        // console.log( typeof this.$route );
    }
};
</script>
<style lang="less" scoped>
// 分类页样式
.films-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
    overflow: hidden;
}
.content-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    width: 100%;
    font-size: 0rem;
    > * {
        margin-top: 0.2rem;
    }
}
</style>